import { h } from "snabbdom";
import {
    handleSSMLRemarkClick,
    handleUnwrapNodes,
    handleReplaceMarkNode,
    handleReplacePinYinNode,
} from "../helper";
export default {
    type: "ssml-mark",
    renderElem: function (elem, _children, editor) {
        const showPopover = () => {
            // console.log("showPopover", elem);
            handleSSMLRemarkClick(editor, elem);
        };

        const hidePopover = () => {
            // console.log("hidePopover", elem);
            // handleReplaceMarkNode(editor, elem, false);
        };
        // 将elem转换为Break类型，这里假设elem已经包含了Break类型所需的属性
        const ssml_elem = elem;
        // console.log("elem:", elem);
        return h(
            "span",
            {
                className: "ssml-wrapper",
                contentEditable: false,
                on: {
                    mouseenter: function (event) {
                        event.preventDefault();
                        showPopover();
                    },
                    mouseleave: function (event) {
                        event.preventDefault();
                        hidePopover();
                    },
                },
            },
            [
                h(
                    "span",
                    {
                        contentEditable: false,
                        style: {
                            backgroundColor: "var(--ssml-phoneme)",
                            borderRadius: "4px",
                            color: "#fff",
                            padding: "4px 2px",
                            margin: "0 3px",
                        },
                    },
                    _children
                ),
            ]
        );
    },
};
